import { useEffect, useState } from 'react'
import style from './BottomRight.module.css'
import {
    ArrowUpOutlined,
    QuestionOutlined,
    MessageOutlined,
    ProfileOutlined,
    ScheduleOutlined,
    CalendarOutlined,
} from "@ant-design/icons";
import { NavLink } from "react-router-dom";
import Socket from "../../view/Socket/index";
function BottomRight() {
    // 返回顶部
    const [showButton, setShowButton] = useState(false);
    const [scrollY, setScrollY] = useState(0);
    const scrollToTop = () => {
        window.scrollTo({
            top: 0,
            behavior: "smooth",
        });
    };

    useEffect(() => {
        const handleScroll = () => {
            const currentScrollY = window.scrollY;
            setScrollY(currentScrollY);
            localStorage.setItem("scrollY", currentScrollY);
            if (currentScrollY > 50) {
                setShowButton(true);
            } else {
                setShowButton(false);
            }
        };
        window.addEventListener("scroll", () => {
            // console.log(window.scrollY);
        });
        window.addEventListener("scroll", handleScroll);

        return () => {
            window.removeEventListener("scroll", handleScroll);
        };
    }, []);
    //客服聊天
    const [bool, setBool] = useState(false)
    const handleChat = () => {
        setBool(true)
    }
    const handlefan = () => {
        setBool(false)
    }
    return (
        // 右下角
        <div>
            {/* 右下角 */}
            <div className={style.footer}>
                <div className={style.boxfooter}>
                    {showButton && (
                        <ArrowUpOutlined
                            className={style.backtop}
                            onClick={scrollToTop}
                        ></ArrowUpOutlined>
                    )}
                    <div className={style.socket}>
                        <QuestionOutlined />
                        <div className={style.hovers}>
                            <p>
                                <CalendarOutlined />
                                &nbsp;<NavLink to="/home/opinions">意见反馈</NavLink>
                            </p>
                            <p onClick={handleChat}>
                                <MessageOutlined />
                                &nbsp;在线客服
                            </p>
                            <p>
                                <ProfileOutlined />
                                &nbsp;<NavLink to="/home/tutorial">新手教程</NavLink>
                            </p>
                            <p>
                                <ScheduleOutlined />
                                &nbsp;<NavLink to="/home/demand">提交模版需求</NavLink>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            {/* 聊天弹框 */}
            <div>
                {
                    bool ? <Socket handlefan={handlefan} bool={bool}></Socket> : ''
                }
            </div>
        </div>

    )
}

export default BottomRight
